import React, { Fragment, useState, useEffect, useRef } from "react";
import { useRouter } from 'next/router';
import Slider from "react-slick";
import { Container, Row, Col, Button, Dropdown, Media } from "reactstrap";
import tool3 from "../../../../public/assets/images/tools/3.png";
import tool4 from "../../../../public/assets/images/tools/4.png";
// import tool1 from "../../../../public/assets/images/tools/1.png";
import tool1 from "../../../../public/assets/images/tools/banner-1.jpg";
import { getProductsFilter } from "../../../../api/api";

const Banner = () => {
  const router = useRouter();

  const [productList, setProductList] = useState([]);

  const [yearList, setYearList] = useState([]);
  const [brandList, setBrandList] = useState([]);
  const [modelList, setModelList] = useState([]);
  const [engineList, setEngineList] = useState([]);
  const [fuelTypeList, setFuelTypeList] = useState([]);

  // const [yearDisable, setYearDisable] = useState(false);
  const [brandDisable, setBrandDisable] = useState(true);
  const [modelDisable, setModelDisable] = useState(true);
  const [engineDisable, setEngineDisable] = useState(true);
  const [fuelTypeDisable, setFuelTypeDisable] = useState(true);
  const [searchActive, setSearchActive] = useState(false);
  
  const yearInput = useRef("");
  const brandInput = useRef("");
  const modelInput = useRef("");
  const engineInput = useRef("");
  const fuelTypeInput = useRef("");

  const batchSetDisable = (id) => {
    if (id == 'year') {
      // setBrandDisable(true);
      setModelDisable(true);
      setEngineDisable(true);
      setFuelTypeDisable(true);
    }
    else if (id == "brand") {
      // setModelDisable(true);
      setEngineDisable(true);
      setFuelTypeDisable(true);
    }
    else if (id == "model") {
      // setEngineDisable(true);
      setFuelTypeDisable(true);
    }
  }


  const onYearOptionChange = (e) => {
    yearInput.current = e.target.value;

    setBrandDisable(false);
    brandInput.current = "";
    document.getElementById("brand").value = "defaultOption";
    modelInput.current = "";
    document.getElementById("model").value = "defaultOption";
    engineInput.current = "";
    document.getElementById("engine").value = "defaultOption";
    fuelTypeInput.current = "";
    document.getElementById("fuelType").value = "defaultOption";
    batchSetDisable("year");
    var input = {
      "filterType": "brand",
      "year": e.target.value,
      "brand": "",
      "model": "",
      "engine": "",
      "fuelType": ""
    };
    if (e.target.value == "" || e.target.value == "defaultOption") {
      setSearchActive(false);
    }
    getProductsFilter(input).then(res => {
      setBrandList(res.data);
    })
  }

  const onBrandOptionChange = (e) => {
    brandInput.current = e.target.value;

    setModelDisable(false);
    modelInput.current = "";
    document.getElementById("model").value = "defaultOption";
    engineInput.current = "";
    document.getElementById("engine").value = "defaultOption";
    fuelTypeInput.current = "";
    document.getElementById("fuelType").value = "defaultOption";
    batchSetDisable("brand");
    var input = {
      "filterType": "model",
      "year": yearInput.current,
      "brand": e.target.value,
      "model": "",
      "engine": "",
      "fuelType": ""
    };
    if (e.target.value == "" || e.target.value == "defaultOption") {
      setSearchActive(false);
    }
    getProductsFilter(input).then(res => {
      setModelList(res.data);
    })
  }

  const onModelOptionChange = (e) => {
    modelInput.current = e.target.value;

    setEngineDisable(false);
    engineInput.current = "";
    document.getElementById("engine").value = "defaultOption";
    fuelTypeInput.current = "";
    document.getElementById("fuelType").value = "defaultOption";
    batchSetDisable("model");
    var input = {
      "filterType": "engine",
      "year": yearInput.current,
      "brand": brandInput.current,
      "model": e.target.value,
      "engine": "",
      "fuelType": ""
    };
    if (e.target.value == "" || e.target.value == "defaultOption") {
      setSearchActive(false);
    }
    getProductsFilter(input).then(res => {
      setEngineList(res.data);
    })
  }

  const onEngineOptionChange = (e) => {
    engineInput.current = e.target.value;
    setFuelTypeDisable(false);
    fuelTypeInput.current = "";
    document.getElementById("fuelType").value = "defaultOption";
    batchSetDisable("engine");
    var input = {
      "filterType": "fuelType",
      "year": yearInput.current,
      "brand": brandInput.current,
      "model": modelInput.current,
      "engine": e.target.value,
      "fuelType": ""
    };
    if (e.target.value == "" || e.target.value == "defaultOption") {
      setSearchActive(false);
    }
    getProductsFilter(input).then(res => {
      setFuelTypeList(res.data);
    })
  }

  const onFuelTypeOptionChange = (e) => {
    fuelTypeInput.current = e.target.value;
    if (e.target.value == "" || e.target.value == "defaultOption") {
      setSearchActive(false);
    }
    else {
      setSearchActive(true);
    }
  }

  const onSearchBtnClick = () => {
    router.push(`/page/account/product-list?year=${yearInput.current}&brand=${brandInput.current}&model=${modelInput.current}&engine=${engineInput.current}&fuelType=${fuelTypeInput.current}`);
    // if (searchActive) {
    // getProducts({
    //   "year": yearInput.current,
    //   "brand": brandInput.current,
    //   "model": modelInput.current,
    //   "engine": engineInput.current,
    //   "fuelType": fuelTypeInput.current,
    //   "pageNum": 1,
    //   "pageSize": 10
    // }).then(res => {
    //   setPageNum(1);
    //   setPageCount(res.page_count);
    //   setProductList(res.data);
    // })
    // }
    // else {
    //   toast.error("Please Login To Shopping!");
    // }
  }

    useEffect(() => {
    // var user = localStorage.getItem("XYCLogin")
    // if (user) {
    setSearchActive(false);
    var input = {
      "filterType": "year",
      "year": "",
      "brand": "",
      "model": "",
      "engine": "",
      "fuelType": ""
    };
    getProductsFilter(input).then(res => {
      setYearList(res.data);
    });
    // }
  }, [])

  return (
    <Fragment>
      <section id="tool-bg" className="p-0 height-85 tools_slider">
        <Slider className="slide-1 home-slider">
          <div>
            <div className="home text-center home49">
              <Container>
                <div className="tools-parts" id="tool-1">
                  <Media src={tool3} className="img-fluid" alt="" />
                </div>
                <div className="tools-parts1" id="tool-2">
                  <Media src={tool4} className="img-fluid" alt="" />
                </div>
              </Container>
            </div>
            <div style={{ height: 80, width: '100%', position: "absolute", bottom: 5, justifyContent: 'center', display: 'flex' }}>
              <div style={{ height: "100%", width: '60%', backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, borderBottomWidth: 1, borderBottomWidth: 1, borderBottomColor: 'lightgray', borderBottomStyle: 'solid' }}>
                <section className="full-banner parallax small-slider tools-parallax-product">
                  <Container>
                    <Row>
                      <Col lg="12">
                        <div className="tools-description">
                          <div>
                            <div className="tools-form" style={{ display: 'flex', width: '100%', position: "absolute", bottom: -30 }}>
                              <div className="search-box">
                                <select name="year" id="year" className="form-control" onChange={onYearOptionChange}>
                                  <option value="defaultOption">Year</option>
                                  {
                                    yearList.map(item => {
                                      return <option value={item}>{item}</option>
                                    })
                                  }
                                </select>
                              </div>
                              <div className="search-box">
                                <select name="brand" id="brand" className="form-control" onChange={onBrandOptionChange} disabled={brandDisable}>
                                  <option value="defaultOption">Brand</option>
                                  {
                                    brandList.map(item => {
                                      return <option value={item}>{item}</option>
                                    })
                                  }
                                </select>
                              </div>
                              <div className="search-box">
                                <select name="model" id="model" className="form-control" onChange={onModelOptionChange} disabled={modelDisable}>
                                  <option value="defaultOption">Model</option>
                                  {
                                    modelList.map(item => {
                                      return <option value={item}>{item}</option>
                                    })
                                  }
                                </select>
                              </div>
                              <div className="search-box">
                                <select name="engine" id="engine" className="form-control" onChange={onEngineOptionChange} disabled={engineDisable}>
                                  <option value="defaultOption">Engine</option>
                                  {
                                    engineList.map(item => {
                                      return <option value={item}>{item}</option>
                                    })
                                  }
                                </select>
                              </div>
                              <div className="search-box">
                                <select name="fuelType" id="fuelType" className="form-control" onChange={onFuelTypeOptionChange} disabled={fuelTypeDisable}>
                                  <option value="defaultOption">Fuel Type</option>
                                  {
                                    fuelTypeList.map(item => {
                                      return <option value={item}>{item}</option>
                                    })
                                  }
                                </select>
                              </div>
                              <div className="search-button">
                                <Button disabled={!searchActive} className="btn btn-solid btn-find" onClick={onSearchBtnClick} >
                                  Search
                                </Button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </Col>
                    </Row>


                  </Container>
                </section>
              </div>
            </div>
          </div>
        </Slider>
      </section>
    </Fragment>
  );
};

export default Banner;
